Vue.component('add-node', {//添加菜单组件
    template: `<el-dialog :title="form.Level==1?'添加菜单':'添加子菜单'" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="菜单名称">
                <el-form-item prop="Model_Name">
                    <el-input v-model.trim="form.Model_Name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="绑定页面">
                <el-form-item prop="Url">
                    <el-select placeholder="可选择绑定页面" style="width: 100%;" clearable filterable v-model.trim="form.Url">
                        <el-option v-for="(item,index) in page" :key="index" :label="item.Page_Name" :value="item.File_Name"></el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.Level==1" label="菜单图标">
                <el-form-item prop="Icon">
                    <el-select placeholder="请选择菜单图标" style="width: 100%;" clearable filterable v-model.trim="form.Icon">
                        <el-option v-for="(item,index) in Icon" :key="index" :label="item" :value="'layui-icon '+item">
                            <i class="layui-icon" :class="item"></i>
                            <i>{{item}}</i>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['data', 'page', 'visible'],
    data() {
        return {
            visibleDialog: false,
            Icon: [],//图标库
            form: {
                Model_Number: '',
                ...this.data,
                Icon: '',
                Model_Name: '',
            },
            rules: {
                Model_Name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                Icon: [{ required: true, message: '请选择菜单图标', trigger: 'change' }]
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
        'data.Parent_Number': function (newVal) {
            this.form.Parent_Number = newVal;
        },
        'data.Level': function (newVal) {
            this.form.Level = newVal;
        }
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                url: absolutepath() + 'utils/Icon.json',
                type: 'GET',
                success: function (data) {
                    that.Icon = data;
                },
            })
        },
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    // let baseData = deepClone(that.form);
                    // baseData.Level = baseData.Level + 1
                    // baseData.Parent_Number = baseData.Parent_Number?baseData.Parent_Number:BusinessPreview;//业务预览
                    //, base_system_model_list:[baseData]
                    $.ajax({
                        headers:requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Add: { business_system_model_list: [that.form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.form = { ...that.data, Icon: '', Model_Name: '', }
                                that.$message.success("提交成功")
                                that.$emit('update:visible', false)
                                that.$emit('success')
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
    mounted() {
        this.getData();
    }
})

Vue.component('edit-node', {//修改菜单组件
    template: `<el-dialog title="修改菜单" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="菜单名称">
                <el-form-item prop="Model_Name">
                    <el-input v-model.trim="form.Model_Name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.childNodes=='0'" label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <--<el-descriptions-item v-if="form.childNodes=='0'" label="绑定页面">
                <el-form-item prop="Url">
                    <el-select placeholder="可选择绑定页面" style="width: 100%;" clearable filterable v-model.trim="form.Url">
                        <el-option v-for="(item,index) in page" :key="index" :label="item.Page_Name" :value="item.Page_SerialNumber"></el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>-->
            <el-descriptions-item label="绑定页面（开发）">
                <el-form-item prop="Url">
                    <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="form.Level==1" label="菜单图标">
                <el-form-item prop="Icon">
                    <el-select placeholder="请选择菜单图标" style="width: 100%;" clearable filterable v-model.trim="form.Icon">
                        <el-option v-for="(item,index) in Icon" :key="index" :label="item" :value="'layui-icon '+item">
                            <i class="layui-icon" :class="item"></i>
                            <i>{{item}}</i>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['data', 'page', 'visible'],
    data() {
        return {
            visibleDialog: false,
            Icon: [],//图标库
            form: this.data,
            baseData:{},
            rules: {
                Model_Name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                Icon: [{ required: true, message: '请选择菜单图标', trigger: 'change' }]
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
        data: {
            handler(newVal) {
                const that = this;
                this.form = {};
                $.ajax({//查询账户信息
                    headers: requestHeaders(),
                    url: `${BASE_URL2}/member/getMemberPoint`,
                    type: 'POST',
                    data: {
                        Data: JSON.stringify([{
                            tableName: 'business_system_model_list',
                            Condition: window.btoa(unescape(encodeURIComponent("Model_Number='" + newVal.Model_Number + "'"))),
                        }, {
                            tableName: 'base_system_model_list',
                            Condition: window.btoa(unescape(encodeURIComponent("Model_Number='" + newVal.Model_Number + "'"))),
                        }]),
                    },
                    success: function ({base_system_model_list,business_system_model_list}) {
                        if (base_system_model_list.length==1,business_system_model_list.length==1) {
                            that.form = business_system_model_list[0];
                            that.baseData = base_system_model_list[0];
                        }
                    },
                    complete: function (XMLHttpRequest) {
                        requestPretreatment(XMLHttpRequest);//config/config.js 响应预检
                    },
                    dataType: "json"
                });
            },
            deep: true // 深度监听  
        },
    },
    methods: {
        getData() {
            const that = this;
            $.ajax({
                url: absolutepath() + 'utils/Icon.json',
                type: 'GET',
                success: function (data) {
                    that.Icon = data;
                },
            })
        },
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    // let obj = deepClone(that.form);
                    // that.baseData.Icon = obj.Icon;
                    // that.baseData.Url = obj.Url;
                    // that.baseData.Model_Name = obj.Model_Name;
                    //,base_system_model_list:[that.baseData]
                    $.ajax({
                        headers:requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Modify: { business_system_model_list: [that.form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.form = {};
                                that.$message.success("修改成功");
                                that.$emit('update:visible', false);
                                that.$emit('success');
                            } else {
                                that.$message.error("修改失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
    mounted() {
        this.getData();
    }
})
new Vue({
    el: '#app',
    data() {
        return {
            defaultProps: {
                children: 'Children',
                label: 'Model_Name'
            },
            tableData: [],
            form: {//查询筛选
            },
            nodeData: {//添加
                Parent_Number: '',
                Level: 1,
                Url:''
            },
            nodeEditData: {},//修改
            loading: false,
            dialogVisible: false,
            dialogEditVisible: false,
            page: [],
        }
    },
    mounted() {
        this.getList();
        this.getData();
    },
    methods: {
        onSerach() {

        },
        getList() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/getAllFunctionMenu?UserName=&Password=&FunctionType=1`,
                type: 'GET',
                success: function (data) {
                    if (data.length > 0) {
                        that.tableData = data
                    }
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getData() {
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',       
                data:{
                    Data:'base_page_info',
                    Condition:"Absolute_Path<>'' and Row_Status='0'"
                },
                success: function (data) {
                    if (data.length > 0) {
                        that.page = data
                    }
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Add(node, data) {
            if (node && data) {
                this.nodeData.Parent_Number = data.Model_Number;
                this.nodeData.Level = node.level + 1;
            } else {
                this.nodeData.Parent_Number = '';
                this.nodeData.Level = 1;
            }
            this.dialogVisible = true;
        },
        Edit(node, row) {
            this.nodeEditData = row;
            this.nodeEditData.childNodes = node.childNodes.length
            this.dialogEditVisible = true;
        },
        Remove(row) {
            const that = this
            this.$confirm('警告！此操作将删除该菜单节点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                $.ajax({//查询账户信息
                    headers: requestHeaders(),
                    url: `${BASE_URL2}/generalBusiness/generalQueryByTableNameWithOriginal`,
                    type: 'POST',
                    data: {
                        Data: "business_system_model_list" ,
                        Condition: "Model_Number='" + row.Model_Number + "'"
                    },
                    success: function (business_system_model_list) {
                        if (business_system_model_list.length==1) {
                            business_system_model_list[0].Row_Status = '1';
                            $.ajax({
                                headers:requestHeaders(),
                                url: `${BASE_URL2}/generalBusiness/generalSave`,
                                type: 'POST',
                                data: {
                                    Data: JSON.stringify({ Modify: { business_system_model_list } })
                                },
                                success: function (res) {
                                    if (res.Status == 'success') {
                                        that.getList();
                                        that.$message({
                                            type: 'success',
                                            message: '删除成功!'
                                        });
                                    }
                                },
                                complete: function (XMLHttpRequest) {
                                    requestPretreatment(XMLHttpRequest);
                                },
                                dataType: "json"
                            })
                        }
                    },
                    complete: function (XMLHttpRequest) {
                        requestPretreatment(XMLHttpRequest);//config/config.js 响应预检
                    },
                    dataType: "json"
                });
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '已取消操作'
                });
            });
        }
    }
})